<template>
    <el-row>
        <el-col :offset="7">
            <el-steps :space="200" :active="3" align-center="false" finish-status="success">
                <el-step title="配置基本信息"></el-step>
                <el-step title="配置合同模板"></el-step>
                <el-step title="配置申请材料"></el-step>
            </el-steps>
        </el-col>
        <el-input v-model="productId" type="hidden"></el-input>
        <el-row>
            <el-col :span="12" offset="6">

                说明：补充申请材料是指用户在申请该产品贷款时，需要额外提<br>
                交的材料附件；可以针对自身的产品业务配置不同的材料类型。

            </el-col>
        </el-row>
        <el-row>
            <ei-col>
                <el-card class="box-card">
                    <template>
                        <p style="text-align: center; margin: 0 0 20px">申请材料补充</p>
                        <div style="text-align: center">
                            <el-transfer style="text-align: left; display: inline-block" v-model="value" filterable
                                :left-default-checked="[]" @right-check-change="change" :right-default-checked="[]"
                                :render-content="renderFunc" :titles="['Source', 'Target']" :button-texts="['到左边', '到右边']"
                                :format="{
                                    noChecked: '${total}',
                                    hasChecked: '${checked}/${total}'
                                }" @change="handleChange" :data="data">
                            </el-transfer>
                        </div><br><br>
                        <el-button type="primary" @click="addC()">提交</el-button>
                    </template>
                </el-card>
            </ei-col>
        </el-row>

    </el-row>
</template>

<script>
export default {
    data() {
        return {
            data: [],
            value: [],
            value4: [],
            renderFunc(h, option) {
                return <span>{option.key} - {option.label}</span>;
            },
            documentTypeList: {},
            productId: this.$route.params.id,
            dlist: []
        };
    },

    methods: {
        handleChange(value, direction, movedKeys) {
            console.log(value, direction, movedKeys);
        },
        loadDocumentTypeList() {
            this.$axios.get("/documentTypes").then((res) => {
                this.documentTypeList = res.data.data.documentTypeList;

                if (this.documentTypeList != null) {

                    const allData = this.documentTypeList
                    const data2 = []
                    for (let i = 0; i < allData.length; i++) {
                        data2.push({
                            key: allData[i].documentTypeId,
                            label: allData[i].documentTypeName,
                        })
                    }
                    this.data = data2
                } else {

                }
            });
        },
        change() {
            for (let i = 0; i < this.value.length; i++) {
                this.dlist.push(this.value[i]);
            }
        },
        addC() {
            console.log(this.dlist)
            this.$axios.post("/PAD/Addlist", {
                productId: this.productId,
                list: this.dlist
            }).then((res) => {
                if (res.data.code == 200) {
                    alert("补充材料添加成功！");
                    this.$router.replace("/");
                }
            })
        }
    },
    mounted() {
        this.loadDocumentTypeList();
    }
};
</script>

<style>
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
}

#bk {
    background-color: #e6a23c;
    width: 1000px;
    height: 50px;
    margin-top: 40px;
}

.step {
    margin-top: 30px;
    margin-left: 525px;
}

.step2 {
    margin-top: 100px;
    margin-left: 180px;
}

#tixing {
    background-color: darkorange;
}

.box-card{
    width: 800px;
    margin-top: 30px;
    margin-left: 330px;
}
</style>